<template>
  <div class="yuding">
    <my-header></my-header>
    <div class="abc1">
      <div class="a1">
        <div class="w1080">
          <ul class="clearfix">
            <li class="clearleft">
              <label style="padding: 10px">目的地</label>
              <input style="padding-left: 10px" type="text" :value="`广州`" />
              <div class="fapo" @click="onShow($event)">
                <div class="fapo1">
                  <span>热门城市</span>
                  <span>旅舍总览</span>
                  <span>ABCDEFG</span>
                  <span>HIJKLMNOP</span>
                  <span>QRSTUVWXYZ</span>
                </div>
                <div class="fapo2">
                  <a href="#"><span>北京</span></a>
                  <a href="#"><span>上海</span></a>
                  <a href="#"><span>广州</span></a>
                  <a href="#"><span>深圳</span></a>
                  <a href="#"><span>杭州</span></a>
                  <a href="#"><span>西安</span></a>
                  <a href="#"><span>天津</span></a>
                  <a href="#"><span>南京</span></a>
                  <a href="#"><span>成都</span></a>
                  <a href="#"><span>拉萨</span></a>
                  <a href="#"><span>昆明</span></a>
                  <a href="#"><span>三亚</span></a>
                  <a href="#"><span>武汉</span></a>
                  <a href="#"><span>哈尔滨</span></a>
                  <a href="#"><span class="fapo3">苏州</span></a>
                  <a href="#"><span>厦门</span></a>
                  <a href="#"><span>大理</span></a>
                  <a href="#"><span>丽江</span></a>
                  <a href="#"><span>大连</span></a>
                  <a href="#"><span>桂林</span></a>
                  <a href="#"><span>黄山</span></a>
                  <a href="#"><span>阿勒泰地区</span></a>
                  <a href="#"><span class="fapo4">香港</span></a>
                  <a href="#"><span>澳门</span></a>
                </div>
              </div>
            </li>
            <li class="clearzong">
              <label style="padding: 10px">入住日期</label>
              <el-date-picker
                type="datetime"
                v-model="value1"
                value1="2022-11-21"
              >
              </el-date-picker>
            </li>
            <li class="clearright">
              <label style="padding: 10px">退房日期</label>
              <el-date-picker
                type="datetime"
                v-model="value2"
                value2="2022-11-22"
              >
              </el-date-picker>
            </li>
            <button>搜索</button>
          </ul>
        </div>
        <div class="w3060" style="clear: both">
          <div class="list"></div>
          <h3 class="sure">
            <span>广州</span>
            今日共有
            <font>1</font>
            家旅舍可供预定
          </h3>
          <div class="cleanbox">
            <!-- *-**************************************** -->
            <div class="cleanleft">
              <div class="title">
                <span>排序方式:</span>
                <a href="#">
                  <span>价格</span>
                  <i class="el-icon-sort"></i>
                  <b></b>
                </a>
                <a href="#">
                  <span>距离市中心</span>
                  <i class="el-icon-sort"></i>
                  <b></b>
                </a>
                <span></span>
              </div>
              <div class="zjbox">
                <div class="zbox">
                  <a href="#"
                    ><img
                      src="http://111.230.248.218:1500/fileUpload/104983/15422715974171542271597417_0.jpg"
                      alt=""
                  /></a>
                </div>
                <div class="ybox">
                  <div class="dianping">
                    <p class="fr">
                      <a href="#" class="colleft">
                        <b></b>
                        <i class="el-icon-chat-dot-square"></i>
                        点评
                      </a>
                      <a href="#" class="colright">
                        <b></b>
                        <i class="el-icon-star-off"></i>
                        收藏
                      </a>
                    </p>
                    <h2>广州东山家家青年旅舍</h2>
                  </div>
                  <p class="zzzj">
                    <b></b>
                    <i class="el-icon-location-outline"></i>
                    广州市越秀区共和路12号-5
                  </p>
                  <div class="fj">
                    <div class="fjleft">
                      <span>房间</span>
                      <span>178.00元起</span>
                    </div>
                    <div class="fjright">
                      <router-link to="/pandectdetail"
                        ><button>选择客房</button></router-link
                      >
                    </div>
                  </div>
                </div>
              </div>
              <p class="pzzj">
                未找到理想的旅舍？返回
                <a href="#">
                  <img src="http://www.yhachina.com/images/ssym.jpg" alt="" />
                  搜索页面
                </a>
              </p>
              <div class="zhbox">
                <h2>浏览记录</h2>
                <div class="zh1" style="margin-top: 10px" v-for="n in 3">
                  <img
                    style="height: 100px"
                    src="http://111.230.248.218:1500/fileUpload/104983/15422715974171542271597417_0.jpg"
                    alt=""
                  />
                  <h4>广州东山家家青年旅舍</h4>
                  <span>广州市越秀区共和路12号-5</span>
                  <a href="#">预定</a>
                </div>
              </div>
            </div>
            <!-- *********************************************** -->
            <div class="cleanright">
              <div class="title">
                <i></i>
                <h3>跟随漂浮</h3>
                <h4>收起地图</h4>
                <span></span>
              </div>
              <div id="container" style="width: 100%; height: 300px"></div>
              <div class="qqq1"><b>您最近的搜索记录</b></div>
              <div class="qqa1" style="display: flex">
                <img
                  style="width: 80px;  margin-top: 5px"
                  src="http://111.230.248.218:1500/fileUpload/104983/15422715974171542271597417_0.jpg"
                  alt=""
                />
                <h5 style="font-size: 16px; width: 50px; margin:3px 0 0 10px;color:#4b8fcc">
                  广州东山家家青年
                </h5>
              </div>
              <div class="qqq2"><b>优惠活动</b></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import MyHeader from "@/components/MyHeader.vue"
import MyFooter from "@/components/MyFooter.vue"
import AMapLoader from "@amap/amap-jsapi-loader"
import { CLOSING } from "ws"
export default {
  components: { MyHeader, MyFooter },
  data() {
    return {
      map: null, // 绑定加载到的地图对象
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date())
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit("pick", date)
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit("pick", date)
            },
          },
        ],
      },
      value1: "",
      value2: "",
    }
  },
  mounted() {
    AMapLoader.load({
      key: "	3718a8b3e7f109fed9db49882bb13c18",
      version: "2.0",
      plugins: [],
    })
      .then(AMap => {
        this.map = new AMap.Map("container")
        this.map.setCenter([113.308224, 23.125122])
        this.map.setZoom(18)
        var marker = new AMap.Marker({
          position: new AMap.LngLat(113.308224, 23.125122),
          offset: new AMap.Pixel(-10, -10),
          icon: "http://www.yhachina.com/images/position-icon.png", // 添加 Icon 图标 URL
          title: "北京",
        })
        this.map.add(marker)
      })
      .catch(e => {
        console.log(e)
      })
  },
  methods: {
    ccc1() {},
    onShow(e) {
      console.log(e.target)
    },
  },
}
</script>
<style>
* {
  list-style: none;
  flex-direction: none;
  box-sizing: border-box;
  text-decoration: none;
  margin: 0;
  padding: 0;
}
.abc1 {
  overflow: hidden;
}
.a1 {
  width: 100%;
  height: 80px;
  background-image: url(http://www.yhachina.com/images/list-dp.gif);
}
.a1 .w1080 {
  width: 1080px;
  margin-left: 18%;
  height: 65px;
  position: relative;
  margin: 0 auto;
}
.w1080 .fapo {
  display: none;
}
.w1080 .fapo .fapo1 {
  position: absolute;
  bottom: -39px;
  width: 420px;
  height: 40px;
  background-color: #87c524;
  font-size: 12px;
  color: #ffffff;
  padding: 0px 7px;
  display: flex;
  justify-content: space-around;
  padding-top: 10px;
  /* display: none; */
}

.w1080 .fapo1 span {
  height: 20px;
}
.w1080 .fapo1 span:nth-child(1) {
  background-color: #6ea713;
  color: #fff;
}
.w1080 .fapo1 span:nth-child(2) {
  background-color: #6ea713;
  color: #fff;
}
.w1080 .fapo .fapo2 {
  flex-shrink: 0;
  position: absolute;
  bottom: -200px;
  width: 420px;
  height: 152px;
  background-color: white;
  word-wrap: break-word;
}
.w1080 .fapo .fapo2 span {
  flex-shrink: 1;
  width: 105px;
  height: 30px;
  text-indent: 30px;
  font-size: 16px;
  padding: 50px 35px;
  word-wrap: break-word;
  font-size: 12px;
  padding-top: 250%;
}
.w1080 .fapo .fapo2 a {
  color: #333;
  height: 30px;
}
.w1080 .fapo .fapo2 .fapo3 {
  margin-left: -12px;
}
.w1080 .fapo .fapo2 .fapo4 {
  margin-left: -36px;
  height: 30px;
}
.clearfix {
  display: flex;
  position: absolute;
  top: 3%;
}
.clearfix input {
  border: none;
  outline: none;
  margin-top: 20px;
  margin-right: 20px;
  height: 40px;
  background-color: #fff;
  font-size: 16px;
  color: #666;
  border-radius: 3px;
}
.clearfix li {
  position: relative;
  float: left;
}
.el-input__icon {
  line-height: 80px;
}
.clearfix button {
  background-color: #f7941c;
  width: 120px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 5px rgb(0, 0, 0 /20%);
  height: 45px;
  border: none;
  margin-top: 18px;
  margin-left: 15px;
}
.w3060 {
  width: 1080px;
  margin: 0 auto;
  height: 600px;
}
.w3060 .list {
  border-bottom: 1px solid #eee;
  margin: 30px 0 20px;
}
.sure span {
  color: #4b8fcc;
}
.w3060 .sure font {
  color: #f7941c;
}
.cleanbox {
  margin-top: 20px;
  width: 1080px;
  height: 550px;
}
.cleanleft {
  width: 700px;
  display: inline;
  float: left;
  height: 660px;
}
.cleanleft .title {
  height: 60px;
  background-color: #f0f7ec;
  margin-bottom: 10px;
  color: #666;
  line-height: 60px;
  /* padding-left: 5px; */
  font-size: 14px;
}
.title b {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin: 0 5px;
  background-repeat: no-repeat;
}
.title a {
  margin: 0 20px;
  color: #999;
}
.title span:nth-child(1) {
  margin-left: 3%;
}
.title b {
  background-image: url(../assets/img/1.png);
  background-position: -160px -215px;
  cursor: pointer;
}
.cleanleft .zjbox {
  height: 192px;
  border: 1px solid #f1f8ed;
  margin-bottom: 10px;
  color: #999;
}
.cleanbox .zjbox .zbox {
  float: left;
}
.cleanleft .zjbox .zbox img {
  width: 220px;
  height: 150px;
  border-radius: 5px;
}
.cleanleft .zjbox .ybox {
  float: right;
  width: 460px;
  height: 192px;
}
.cleanleft .zjbox .ybox h2 {
  font-size: 20px;
  color: #333;
  width: 460px;
  height: 27px;
  margin: 5px 0 10px 0;
  font-weight: bold;
}
.cleanleft .zjbox .ybox .fr {
  float: right;
  margin-right: 23px;
  margin-top: 3px;
}
.cleanleft .zjbox .ybox .fr a {
  font-size: 12px;
  color: #666;
}
.cleanleft .zjbox b {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin: 0 5px;
  background-repeat: no-repeat;
}
.cleanleft .zjbox .ybox .fr .colleft b {
  background-image: url(../assets/img/1.png);
  background-position: -248px -215px;
}
.cleanleft .zjbox .ybox .fr .colright b {
  background-image: url(../assets/img/1.png);
  background-position: -175px -215px;
}
.cleanleft .zjbox:hover {
  box-shadow: 5px 5px 5px #ccc;
}
.cleanleft .zjbox .ybox .zzzj {
  margin-top: 0%;
  font-size: 12px;
  color: black;
  padding: 0 30px 0 0;
}
.cleanleft .zjbox .ybox .zzzj b {
  background-image: url(../assets/img/1.png);
  background-position: -373px -90px;
}
.zjbox .ybox .fj .fjleft {
  line-height: 140%;
  margin-top: 10%;
  float: left;
}
.zjbox .ybox .fj .fjleft:hover span {
  color: #f7941c;
}
.zjbox .ybox .fj .fjleft span {
  display: block;
  color: #f8c494;
  font-weight: bold;
  font-size: 18px;
}
.zjbox .ybox .fj .fjright button {
  float: right;
  width: 110px;
  height: 35px;
  color: #f7941c;
  margin: 55px 20px 0 10px;
  font-size: 16px;
  border-radius: 20px;
  border: 1px solid #f7941c;
  background-color: #fff;
}
.zjbox .ybox .fj .fjright button:hover {
  background-color: #f7941c;
  color: #fff;
}
.cleanleft .pzzj a {
  color: #87c524;
}
.cleanleft .zhbox {
  background-color: #f1f8ed;
  padding: 20px;
  margin: 60px 0 55px;
  overflow: hidden;
}
.cleanleft .zhbox .zh1 {
  display: inline-block;
  padding: 10px;
}
.cleanleft .zhbox span {
  font-size: 12px;
  color: #666;
}
.cleanleft .zhbox h2 {
  font-size: 14px;
  color: #333;
}
.cleanleft .zhbox img {
  width: 165px;
  height: 110px;
  border-radius: 5px;
  margin-bottom: 10px;
}
.cleanleft .zhbox a {
  display: block;
  width: 70px;
  padding: 2px 0;
  text-align: center;
  border: 1px solid #c2ccbd;
  border-radius: 20px;
  margin-top: 15px;
  margin-left: 10px;
  color: #999;
}
.cleanright .title {
  width: 320px;
  height: 60px;
  background-color: #f1f8ed;
  display: flex;
  justify-content: flex-end;
}
.cleanright .title i {
  background-image: url(../assets/img/1.png);
  background-position: -456px -388px;
}
.cleanright .title i {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  margin: 0 15px;
  background-repeat: no-repeat;
  margin-top: 10%;
}
.cleanright {
  float: right;
  width: 320px;
  /* height: 500px; */
}
.cleanright .title h3 {
  font-size: 12px;
  margin-top: 10%;
  margin-right: 15px;
  cursor: pointer;
}
.cleanright .title h4 {
  font-size: 12px;
  margin-top: 10%;
  margin-right: 20px;
  cursor: pointer;
}
.cleanright .title span {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  overflow: hidden;
  border-style: solid;
  border-color: #93bce0 transparent transparent transparent;
  margin-top: 12%;
  margin-left: -12px;
}
.cleanright #container {
  width: 315px;
  height: 320px;
  border: none;
}
.qqq1 {
  font-size: 14px;
  color: #333;
  height: 60px;
  line-height: 60px;
  background-color: #f1f8ed;
  padding-left: 20px;
}
.qqa1{
  border: 1px solid #F1F8ED;
  padding: 10px;
}
.qqq2 {
  font-size: 14px;
  color: #333;
  height: 60px;
  line-height: 60px;
  background-color: #f1f8ed;
  margin-top: 15%;
  padding-left: 20px;
  border:1px solid #F1F8ED;

}
</style>
